<template>
  <!-- 品牌所在地，品牌首字母等检索组件 -->
  <div class="brandCon">
    <div class="brandAdress">
      <div class="ppszd">{{ screenBrandMsg.citys.tit }}</div>
      <ul ref="adressBox">
        <li v-for="(item,index) in screenBrandMsg.citys.data" :key="index" :class="active1==index?'choseItem':''" @click="tabClick1(item,index)">{{ item }}</li>
      </ul>
      <div v-if="screenBrandMsg.citys.data.length>15" ref="more" class="more" @click="more">
        <span>更多</span>
        <i class="el-icon-arrow-down" />
      </div>
    </div>
    <p class="aLine" />
    <div class="brandFirst">
      <div>{{ screenBrandMsg.pinyin.tit }}</div>
      <ul>
        <li v-for="(item,index) in screenBrandMsg.pinyin.data" :key="index" :style="screenBrandMsg.pinyin.style" :class="active2==index?'choseItem2':''" @click="tabClick2(item,index)">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    screenBrandMsg: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      /* 租金数据默认格式 */
      /* msg:{
        citys:{
          tit: '按品牌所在地：',
          data:["国际","北京","天津","石家庄","国际","美国","国际","国际","国际","国际","国际","国际","国际","国际","国际","国际","国际","国际","国际","国际","国际","国际","国际",]
        },
        pinyin:{
          tit: '安投资金额：',
          data: ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],
          style: {//如果不修改样式，可以不写内容，要有style字段
            //width: 'auto',
            //marginRight: '30px'
          }
        }
      }, */
      active1: 0,
      active2: 0
    }
  },
  created() {

  },
  methods: {
    more() {
      this.$refs.more.style.display = 'none'
      this.$refs.adressBox.style.height = 'auto'
      this.$refs.adressBox.style.width = '993px'
    },
    tabClick1(item, num) {
      this.active1 = num
    },
    tabClick2(item, num) {
      this.active2 = num
    }
  }
}
</script>

<style lang="scss" scoped>
.brandCon {
  width: 100%;
  background-color: #fff;
  font-size: 16px;
  color: #666;
  padding: 0 21px 0 18px;
  margin-bottom: 20px;
  > .brandAdress {
    padding-top: 15px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    > .ppszd {
      height: 45px;
      width: 136px;
      text-align: left;
      line-height: 2;
    }
    > ul {
      width: 992px;
      height: 40px;
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      padding-bottom: 11px;
      overflow: hidden;
      > li {
        width: 62px;
        line-height: 2;
        cursor: pointer;
      }
      >.choseItem{
        color: #417AEF;
      }
    }
    > .more {
      width: 55px;
      text-align: right;
      line-height: 2;
      cursor: pointer;
    }
  }
  .aLine {
    width: 100%;
    height: 1px;
    background-color: #eee;
  }
  .brandFirst {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    padding-top: 18px;
    > div {
      height: 45px;
      width: 136px;
      line-height: 2;
    }
    > ul {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      > li {
        width: 35px;
        line-height: 2;
        cursor: pointer;
      }
      > li:first-child {
        width: 62px;
      }
      >.choseItem2{
        color: #417AEF;
      }
    }
  }
}
</style>

